<template>
  <div class="container">
    <div class="card" v-for="(item, index) in data" :key="index">
      <div class="delete" @click="deleteAddress(index)">x</div>
      <div class="info">{{ item.name }}，{{ item.phone }}</div>
      <div class="address">{{ item.address }}</div>
      <div class="operate">
        <div class="radio">
          <u-radio-group v-model="value" @change="radioGroupChange()">
            <u-radio :name="index" @change="radioChange()">默认</u-radio>
          </u-radio-group>
        </div>

        <div class="change">
          <u-button size="mini" @click="clickChange(index)">修改</u-button>
        </div>
      </div>
    </div>
    <div class="addAddress">
      <u-button size="medium" @click="isShow = true">+新增地址</u-button>
    </div>
    <!-- 添加地址 -->
    <div class="popup">
      <u-popup
        v-model="isShow"
        mode="center"
        width="550rpx"
        height="700rpx"
        border-radius="14"
      >
        <div style="overflow: hidden">
          <div class="title">添加收货地址</div>
          <div class="input">
            <p>收货人</p>
            <div class="inp">
              <u-input
                placeholder="请输入收货人"
                v-model="newAddress.name"
                class="inp"
              ></u-input>
            </div>
          </div>
          <div class="input">
            <div class="inp">
              <p>收货人电话</p>
              <u-input
                placeholder="请输入电话"
                v-model="newAddress.phone"
              ></u-input>
            </div>
          </div>
          <div class="input">
            <div class="inp">
              <p>收货地址</p>
              <u-input
                placeholder="请输入地址"
                v-model="newAddress.address"
              ></u-input>
            </div>
          </div>
          <div class="add">
            <u-button size="medium" @click="addNewAddress()">添加</u-button>
          </div>
        </div>
      </u-popup>
    </div>
    <!-- 修改地址 -->
    <div class="popup">
      <u-popup
        v-model="isShow2"
        mode="center"
        width="550rpx"
        height="700rpx"
        border-radius="14"
      >
        <div style="overflow: hidden">
          <div class="title">修改收货地址</div>
          <div class="input">
            <div class="inp">
              <p>收货人</p>
              <u-input
                placeholder="请输入收货人"
                v-model="initAddress.name"
              ></u-input>
            </div>
          </div>
          <div class="input">
            <div class="inp">
              <p>收货人电话</p>
              <u-input
                placeholder="请输入电话"
                v-model="initAddress.phone"
              ></u-input>
            </div>
          </div>
          <div class="input">
            <div class="inp">
              <p>收货地址</p>
              <u-input
                placeholder="请输入地址"
                v-model="initAddress.address"
              ></u-input>
            </div>
          </div>
          <div class="add">
            <u-button size="medium" @click="changeAddress()">修改</u-button>
          </div>
        </div>
      </u-popup>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
const value = ref(0)
const isShow = ref(false)
const isShow2 = ref(false)
const changeIndex = ref(0)
const newAddress = reactive({
  name: '',
  phone: '',
  address: ''
})
const initAddress = reactive({
  name: '',
  phone: '',
  address: ''
})
const data = reactive([
  {
    name: '姓名',
    phone: 13712345678,
    address:
      '广东省广州市海珠区xxxxxx广市海珠区xxxxxx广东省广州市海珠区xxxxxx广东省广州市海珠区xxxxxx',
    isDefault: true
  },
  {
    name: '姓名',
    phone: 13712345678,
    address: '广东省广州市海珠区xxxxxx',
    isDefault: false
  }
])
function radioGroupChange(e) {
  console.log(e)
}
function radioChange(e) {
  console.log(e)
}
function deleteAddress(index) {
  data.splice(index, 1)
}
function addNewAddress() {
  for (let key in newAddress) {
    if (newAddress[key] === '') return
  }
  data.push({ ...newAddress })
  for (let key in newAddress) {
    newAddress[key] = ''
  }
  isShow.value = false
}
function changeAddress() {
  for (let key in initAddress) {
    if (initAddress[key] === '') return
  }

  for (let key in data[changeIndex.value]) {
    data[changeIndex.value][key] = initAddress[key]
  }

  isShow2.value = false
}
function clickChange(index) {
  changeIndex.value = index
  for (let key in initAddress) {
    initAddress[key] = data[index][key]
  }
  isShow2.value = true
}
</script>

<style scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  background-color: #f3f3f3;
}
.card:first-child {
  border-top: 1rpx solid black;
}
.card {
  height: 250rpx;
  width: 750rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  position: relative;
}
.delete {
  position: absolute;
  top: 0;
  right: 20rpx;
  font-size: 30rpx;
}
.info,
.address {
  padding-left: 3%;
  padding-top: 2%;
  padding-right: 3%;
  height: 80rpx;
  font-size: 29rpx;
}
.operate {
  position: absolute;
  height: 70rpx;
  bottom: 0;
  width: 100%;
}
.radio {
  width: 300rpx;
  margin-left: 20rpx;
}
.change {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
}
.addAddress {
  text-align: center;
}
.popup {
  font-size: 36rpx;
  padding: 3%;
}
.title {
  text-align: center;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.input {
  padding: 3%;
}
.add {
  text-align: center;
}
.inp {
  border-bottom: 1px solid black;
}
</style>
